class InfoItem extends React.Component{

    render(){
        return(
            <Row style={{margin:5,paddingLeft:5,backgroundColor:"#f8f8f8"}}>
                <Col xs="7" style={{padding:"12px 0"}}>
                    <div>
                        {this.props.img?<img style={{display:"inline"}} src={this.props.img}/>:''}
                        {this.props.icon?<i className={"fa fa-"+this.props.icon} style={{fontSize:15,marginRight:5}}></i>:''}
                        <h3 style={{display:"inline"}}>{this.props.title}</h3>
                    </div>
                </Col>
                <Col xs="5" style={{padding:"12px 0"}}>
                    <p style={{textAlign:"center"}}><cite style={{fontSize:20,fontWeigth:200,color:this.props.color?this.props.color:"green"}}>{this.props.value}</cite></p>
                </Col>
            </Row>
        )
    }
}


class BackLog extends React.Component {

    constructor(props){
        super(props);
        this.style = {
            a : {
                margin:5,
                paddingLeft:5,
                backgroundColor:"#f8f8f8",
                display:"block",
                cursor:"pointer",
                textAlign:"center",
                padding:"10px 15px"
            },
            h3 : {
                fontSize:12,
                paddingBottom:10
            }
        }
    }

    render(){
        return(

            <a href={this.props.link} style={this.style.a}>
                <h3 style={this.style.h3}>{this.props.title}</h3>
                <p><cite style={{fontSize:30,fontWeigth:300,color:this.props.color?this.props.color:"green"}}>{this.props.value}</cite></p>
            </a>
        )
    }
}